<template>
	<view v-if="imgSrc" class="row-center col" style="width: 100vw;height: 100vh;">
		<image v-if="imgType == '壁纸'" style="width: 100%;height: 100%;" :src="imgSrc" mode=""></image>
		<view v-else  style="width: 360rpx;height: 360rpx; display: block; margin:auto;" >
			<image :class="imgRadius?'img_radius':''" :src="imgSrc" style='width: 100%;height: 100%;' alt=""></image>
		</view>
		<view class="bottom row col">
			<image @click="goback" src="../../static/images/fanh.png" mode=""></image>
			<image @click="downloadImage" src="../../static/images/xiaz.png" mode=""></image>
			<image v-if="!kaixin" @click="xiaoxong" src="../../static/images/xx.png" mode=""></image>
			<image v-if="kaixin" src="../../static/images/kaixin.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	 
	export default {
		name:"img-box",
		data() {
			return {
				imgSrc:'',
				kaixin:false,
				imgType:'壁纸',
				imgRadius:false
			};
		},
		onLoad(options) {
			let imgSrc = decodeURIComponent(options.imgSrc)
			console.log('壁纸详情',imgSrc);
			this.imgSrc = imgSrc
			if(options.type == '头像'){
				this.imgType = '头像'
			}
		},
		methods:{
			downloadImage(){
				let that = this
				uni.downloadFile({
					url: this.imgSrc,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath:res.tempFilePath,
								success: function () {
									that.$message.showToast('保存到相册啦~')
								}
							});
						}
					}
				});
			},
			goback(){
				this.$link.goBack()
			},
			xiaoxong(){
				if(this.imgType === '头像'){
					this.imgRadius = !this.imgRadius
					console.log('头像圆角',this.imgRadius);
				}else{
					this.$message.showToast('每天都要开心哦~')
					this.kaixin = true
				}
				
			}
			
		},
		
	}
</script>

<style lang="scss" scoped>
.img_radius{
	border-radius: 360rpx;
}
.bottom{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 140rpx;
	width: 100vw;
	justify-content: space-around;
	background-color: rgba(250, 250, 250, 0.5);
	z-index: 10;
	image{
		width: 80rpx;
		height: 80rpx;
	}
}
</style>